<template>
  <view class="single-choice">
    <view class="question-card">
      <view class="question-title">
        <text class="title-text">{{ question.category }}</text>
      </view>
      <view class="question-content">
        <text class="question-text">{{ question.content }}</text>
        <view class="options-list">
          <view
            v-for="(option, index) in question.options"
            :key="index"
            class="option-item"
            :class="{
              selected: selectedAnswer === index,
              correct: showResult && index === question.correct,
              wrong:
                showResult &&
                selectedAnswer === index &&
                selectedAnswer !== question.correct,
            }"
            @click="selectOption(index)"
          >
            <text class="option-index">{{ ["A", "B", "C", "D"][index] }}.</text>
            <text class="option-text">{{ option }}</text>
          </view>
        </view>

        <view v-if="showResult" class="answer-explanation">
          <view class="correct-answer">
            <text class="explanation-label">正确答案：</text>
            <text class="explanation-text">{{
              ["A", "B", "C", "D"][question.correct]
            }}</text>
          </view>
          <view class="your-answer">
            <text class="explanation-label">你的答案：</text>
            <text
              class="explanation-text"
              :class="{ 'wrong-answer': selectedAnswer !== question.correct }"
              >{{
                selectedAnswer !== null
                  ? ["A", "B", "C", "D"][selectedAnswer]
                  : "未作答"
              }}</text
            >
          </view>
        </view>
      </view>
      <view class="action-bar">
        <button class="submit-btn" @click="checkAnswer" v-if="!showResult">
          提交答案
        </button>
        <button class="next-btn" @click="nextQuestion" v-else>下一题</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    question: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      selectedAnswer: null,
      showResult: false,
    };
  },
  methods: {
    selectOption(index) {
      if (!this.showResult) {
        this.selectedAnswer = index;
      }
    },
    checkAnswer() {
      if (this.selectedAnswer === null) {
        uni.showToast({
          title: "请选择一个答案",
          icon: "none",
        });
        return;
      }
      this.showResult = true;
      if (this.selectedAnswer === this.question.correct) {
        uni.showToast({
          title: "回答正确！",
          icon: "success",
        });
      } else {
        uni.showToast({
          title: "回答错误",
          icon: "error",
        });
      }
    },
    nextQuestion() {
      this.selectedAnswer = null;
      this.showResult = false;
      this.$emit("next");
    },
  },
  watch: {
    question() {
      this.selectedAnswer = null;
      this.showResult = false;
    },
  },
};
</script>

<style>
.single-choice {
  padding: 30rpx;
}

.question-card {
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  padding: 30rpx;
}

.question-title {
  border-bottom: 1px solid #eee;
  padding-bottom: 20rpx;
  margin-bottom: 30rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.question-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 30rpx;
}

.options-list {
  margin-top: 20rpx;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
  background-color: #f5f7fa;
  transition: all 0.3s;
}

.option-item.selected {
  background-color: #ecf5ff;
  border: 1px solid #409eff;
}

.option-item.correct {
  background-color: #f0f9eb;
  border: 1px solid #67c23a;
}

.option-item.wrong {
  background-color: #fef0f0;
  border: 1px solid #f56c6c;
}

.option-index {
  font-weight: bold;
  margin-right: 20rpx;
  color: #409eff;
}

.option-text {
  font-size: 28rpx;
  color: #333;
}

.action-bar {
  margin-top: 40rpx;
  text-align: center;
}

.submit-btn,
.next-btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #fff;
}

.submit-btn {
  background-color: #409eff;
}

.next-btn {
  background-color: #67c23a;
}

.answer-explanation {
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  border-left: 4rpx solid #409eff;
}

.correct-answer,
.your-answer {
  margin: 10rpx 0;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}

.explanation-label {
  color: #666;
  margin-right: 20rpx;
  min-width: 120rpx;
}

.explanation-text {
  color: #67c23a;
  font-weight: bold;
}

.wrong-answer {
  color: #f56c6c;
}
</style>
